<template>
	<view class="hotel-popup" v-show="suitDetail.suit_name">
		<view class="title">{{suitDetail.suit_name}}<view @click="closePopup" class="iconfont">&#xe688;</view></view>
		<scroll-view class="scroll-con" :scroll-y="true">
			<view class="swiper" v-if="suitDetail.typeid == '2' && suitDetail.piclist.length">
				<swiper class="popup-swiper" @change="couponSwiperChange">
					<swiper-item v-for="(item,index) in suitDetail.piclist" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="number-plan"><text class="iconfont">&#xe68a;</text>{{couponCurrent}}/{{suitDetail.piclist.length}}</view>
			</view>
			<view class="detail-content">
				<view class="attr-list">
					<view class="list-con">
						<view class="first" v-if="limitOrder!='0'">每个账号限订{{limitOrder}}组产品</view>
						<view class="item" v-if="suitDetail.need_confirm == '1'">需商家确认库存</view>
						<view class="item">线上支付</view>
					</view>
				</view>
				<view class="hotel-detail-info">
					<view class="item detail" v-if="suitDetail.typeid =='2'">
						<view class="c-title">房型详情</view>
						<view class="content">
							<view class="con-item" v-if="suitDetail.breakfirst"><text class="label" >餐标：</text>{{suitDetail.breakfirst}}</view>
							<view class="con-item" v-if="suitDetail.roomwindow"><text class="label">窗户：</text>{{suitDetail.roomwindow}}</view>
							<view class="con-item" v-if="suitDetail.roomstyle"><text class="label">床型：</text>{{suitDetail.roomstyle}}</view>
							<view class="con-item" v-if="suitDetail.roomarea&&suitDetail.roomarea!='0'"><text class="label" >面积：</text>{{suitDetail.roomarea}}平米</view>
							<view class="con-item" v-if="suitDetail.computer"><text class="label">宽带：</text>{{suitDetail.computer}}</view>
							<view class="con-item" v-if="suitDetail.roomfloor!='0'&&suitDetail.roomfloor"><text class="label">楼层：</text>{{suitDetail.roomfloor}}</view>
							<view class="con-item" v-if="suitDetail.people_limit!='0'&&suitDetail.people_limit"><text class="label">入住：</text>可入住{{suitDetail.people_limit}}人</view>
							<view class="con-item"><text class="label">加床：</text>{{suitDetail.bed_addable==1?'可加床':'不可加床'}}</view>
						</view>
					</view>
					<view class="item facility" v-if="suitDetail.typeid =='2' && suitDetail.service_list">
						<view class="c-title">房间设施</view>
						<view class="content">
							<view class="con-item" v-for="(item,index) in suitDetail.service_list" :key="index">
								<view v-if="" class="label">{{item.top_name}}</view>
								<view v-if="getStr(item.sub_list)" class="text">
									{{getStr(item.sub_list)}}
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="c-title">其他说明</view>
						<view class="content">
							<jyf-parser v-if="suitDetail.description" :html="suitDetail.description"></jyf-parser>
							<text v-else>暂无</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 房型详情
	 * 
	 */
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components:{
			jyfParser
		},
		name: 'stCombinationDetailInfo',
		props: {
			suitDetail:{
				type:Object,
				default(){
					return {}
				}
			},
			price:{
				type:String,
				default: ''
			},
			limitOrder:{
				type:Number,
				default: 0
			},
		},
		data() {
			return {
				couponCurrent: 1,//弹窗swiper
			};
		},
		methods: {
			book(){
				this.$emit('goToBook', this.suitDetail)
			},
			getStr(item){
				let arr = [];
				for (let i of item) {
					arr.push(i.attrname)
				}
				return arr.join(',')
			},
			// 房型弹窗swiper
			couponSwiperChange(e){
				this.couponCurrent=e.detail.current+1
			},
			
			closePopup(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.hotel-popup{
		background-color: $uni-bg-color;
		font-size: $uni-font-size-sm;
		.title{
			@extend .ellipse;
			position: relative;
			height: 86rpx;
			padding: 0 3em;
			line-height: 86rpx;
			font-size: $uni-font-size-lg;
			text-align: center;
			border-bottom: 1rpx solid $uni-border-color;
			.iconfont{
				position: absolute;
				right: 25rpx;
				top: 0;
			}
		}
		.scroll-con{
			max-height: 700rpx;
			min-height: 100rpx;
			// overflow-y: auto;
		}
		.swiper{
			position: relative;
			.popup-swiper,image{
				height: 400rpx;
			}
			image{
				width: 100%;
			}
			.number-plan{
				position: absolute;
				right: 25rpx;
				bottom: 20rpx;
				width: 114rpx;
				height: 40rpx;
				@extend .alignJustify;
				border-radius: 20rpx;
				background-color: rgba(0,0,0,.6);
				color: $uni-text-color-inverse;
				.iconfont{
					margin-right: 10rpx;
					font-size: 28rpx;
				}
			}
		}
		.detail-content{
			padding: 0 25rpx;
		}
		.attr-list{
			padding: 25rpx 0 17rpx;
			border-bottom: 1rpx solid $uni-border-color;
			font-size: $uni-font-size-mini;
			.list-con{
				@extend .displayflex;
				flex-wrap:wrap;
				margin-left: -8rpx;
			}
			.first,.item{
				height: 30rpx;
				margin: 0 0 8rpx 8rpx;
				padding: 0 12rpx;
				border-radius: 3rpx;
			}
			.first{
				line-height: 30rpx;
				color: #ff8800;
				background-color: #fff3e5;
			}
			.item{
				box-sizing: border-box;
				line-height: 28rpx;
				color: $uni-text-color-primary;
				border: 1rpx solid $uni-color-primary;
			}
		}
		.hotel-detail-info{
			.c-title{
				margin-bottom: 24rpx;
				font-size: $uni-font-size-base;
			}
			.item{
				padding: 30rpx 0 20rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&.detail{
					.c-title{
						margin-bottom: 6rpx;
					}
					.content{
						@extend .displayflex;
						flex-wrap:wrap;
						line-height: 2;
						color: $uni-text-color;
					}
					.con-item{
						width: 338rpx;
						&:nth-child(odd){
							margin-right: 22rpx;
						}
					}
					.label{
						color: $uni-text-color-grey;
					}
				}
				&.facility{
					line-height: 1.5;
					.c-title{
						margin-bottom: 16rpx;
					}
					.con-item{
						@extend .displayflex;
						margin-bottom: 22rpx;
					}
					.label{
						width: 170rpx;
						color: $uni-text-color-grey;
					}
					.text{
						width: 500rpx;
						@extend .flex1;
						color: $uni-text-color-deep;
					}
				}
				.content{
					line-height: 1.5;
					color: $uni-text-color-deep;
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
	}
</style>
